<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3动画：css3 实现星空动画 -- 星星闪烁 - 流星划过 - 月亮上升</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 100vw;
        height: 100vh;
        background-color: #000;
      }

      .moon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #f5fffa;
        box-shadow: 0 0 60px #f5fffa;
        position: absolute;
        left: 80%;
        top: 150px;
        animation: myMoon 20s linear;
      }

      @keyframes myMoon {
        0% {
          left: 60%;
          top: 350px;
          opacity: 0;
        }

        100% {
          left: 80%;
          top: 150px;
          opacity: 1;
        }
      }

      img {
        width: 8px;
        height: 8px;
        opacity: 0;
        position: absolute;
        left: 0px;
        top: 0px;
        animation: myStar 2s ease-in-out infinite;
      }

      @keyframes myStar {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 0.4;
        }

        100% {
          opacity: 0;
        }
      }

      .star {
        width: 1px;
        display: block;
        position: absolute;
        background-color: transparent transparent transparent
          rgba(255, 255, 255, 0.5);
        opacity: 0;
        animation: star 4s linear infinite;
      }

      .star::after {
        content: "";
        display: block;
        border: 1px solid #fff;
        border-width: 0px 90px 2px 90px;
        border-color: transparent transparent transparent
          rgba(255, 255, 255, 0.5);
        transform: rotate(-45deg);
      }

      @keyframes star {
        0% {
          opacity: 0;
        }

        30% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          transform: translate(-500px, 300px);
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="moon"></div>
    </div>
    <script>
      var width = document.body.clientWidth - 20;
      var height = document.body.clientHeight - 20;

      //随机生成星星
      for (var i = 0; i < 70; i++) {
        var img = document.createElement("img");
        document.body.appendChild(img);
        img.src = "./imgs/star.png";
        img.style.left = Math.random() * width + "px";
        img.style.top = Math.random() * height + "px";
        img.style.animationDelay = Math.random() * 3 + "s"; //添加动画延迟时间
      }

      //随机生成流星
      for (var i = 0; i < 10; i++) {
        var lx = document.createElement("div");
        lx.className = "star";
        lx.style.right = Math.random() * 400 + 150 + "px";
        lx.style.top = Math.random() * 200 + 100 + "px";
        lx.style.animationDelay = Math.random() * 3 * i + "s"; //添加动画延迟时间
        document.body.appendChild(lx);
      }
    </script>
  </body>
</html>
